<template>
  <!-- van pull refresh 下拉刷新 下拉刷新时会触发 refresh 事件，在事件的回调函数中可以进行同步或异步操作，
操作完成后将 v-model 设置为 false，表示加载完成。 -->
  <!-- 用van -pull refresh将要刷新的包起来,
v-model绑定一个属性为false,处于加载状态
refresh事件,下拉刷新时触发,最后要把v-model绑定的值重新改为false -->
  <van-pull-refresh v-model="loading" @refresh="refresh">
    <div class="find">
      <!-- 给子组件图标的插槽价格渲染条件有传路径才显示 -->
      <hm-nav-bar title="发现"></hm-nav-bar>
      <div class="content">
        <findCell title="面试技巧"></findCell>
        <!-- 遍历数组,把遍历的每一项传参给子组件 -->
        <findTechnic
          v-for="(item, index) in technicList"
          :key="index"
          :info="item"
        ></findTechnic>
        <findCell title="市场数据"></findCell>
        <!-- 标签 -->
        <van-tag class="tag" color="#eceaea" text-color="#585a74">{{
          chartList.city
        }}</van-tag>
        <van-tag class="tag" color="#eceaea" text-color="#585a74">{{
          chartList.position
        }}</van-tag>
        <!-- 怎么给收起展开动画效果?针对高度做动画,钩子函数create获取这一块的高度scrollHeight
      获取这个属性需要高度的数据,给个ref属性
      删除v-show做动画
      超出部分隐藏 -->
        <ul class="chart" ref="chart">
          <li
            class="chartItem"
            v-for="(item, index) in chartList.yearSalary"
            :key="index"
          >
            <div class="c1">{{ item.year.split('工')[0] }}</div>
            <div class="c2">
              <div
                class="num"
                :style="{
                  width: (item.salary / chartList.topSalary) * 100 + '%'
                }"
              >
                ￥{{ item.salary }}
              </div>
            </div>
            <!-- 有可能percent等于0所以要不等于undefined才能显示 -->
            <div class="c3">
              <div v-if="item.percent !== undefined">
                <i v-if="item.percent >= 0" class="iconfont up">&#xe651;</i>
                <i v-else class="iconfont down">&#xe64e;</i>
              </div>
            </div>
            <div class="c4">
              <span v-if="item.percent !== undefined">{{ item.percent }}%</span>
            </div>
          </li>
        </ul>
        <div v-if="lookNum === 3" class="look-more" @click="lookMore">
          查看更多
          <i class="iconfont">&#xe652; </i>
        </div>
        <!-- 行内属性旋转要转为行内块或块 -->
        <div v-else class="look-more" @click="lookless">
          收起
          <i class="iconfont deg180">&#xe652; </i>
        </div>
        <findCell
          title="面经分享"
          @click.native="$router.push('/home/shareList')"
        ></findCell>
        <div>
          <findShare
            v-for="(item, index) in shartList"
            :key="index"
            :shart="item"
          ></findShare>
        </div>
      </div>
    </div>
  </van-pull-refresh>
</template>
<script>
// 导入子组件
import findCell from './findCell'
import findTechnic from './findTechnic'
import findShare from './findShare'
import { articlesTechnic, chartHot, articlesShare } from '@/api/find.js'
export default {
  name: 'find',
  components: { findCell, findTechnic, findShare },
  data () {
    return {
      technicList: [],
      chartList: [],
      lookNum: 3,
      shartList: [],
      loading: false
    }
  },
  async created () {
    this.refresh()
  },
  mounted () {
    document.body.style.backgroundColor = '#ffffff'
  },
  beforeDestroy () {
    document.body.style.backgroundColor = '#ffffff'
  },
  methods: {
    lookMore () {
      // 设置高度度等于总长度的高度记得加px
      this.lookNum = this.chartList.yearSalary.length
      this.$refs.chart.style.height = this.$refs.chart.scrollHeight + 'px'
    },
    lookless () {
      this.lookNum = 3
      // 把高度等于长度为三的时候的高度
      this.$refs.chart.style.height =
        (this.$refs.chart.scrollHeight / this.chartList.yearSalary.length) * 3 +
        'px'
    },
    // 下拉刷新页面
    async refresh () {
      console.log('refresh')
      // 一进入页面发送数据,封装接口
      const res = await articlesTechnic()
      // console.log(res)
      this.technicList = res.data.data.list

      // 封装市场数据的接口
      const res2 = await chartHot()
      // console.log(res2)
      this.chartList = res2.data.data
      // 渲染chart三条数据的高度因为这个时候dom还没有渲染所以使用$nextTick
      this.$nextTick(() => {
        this.$refs.chart.style.height =
          (this.$refs.chart.scrollHeight / this.chartList.yearSalary.length) *
            3 +
          'px'
        // console.log(this.$refs.chart.style.height)
      })

      // 获取面经分享数据
      const res3 = await articlesShare({
        limit: 3
      })
      // console.log(res3)
      this.shartList = res3.data.data.list

      this.loading = false
    }
  },
  activated () {
    const _top = this.$route.meta.scrollTop || 0
    window.scrollTo(0, _top)
  }
}
</script>
<style lang="less" scoped>
.find {
  .content {
    padding: 0 @p15;
    background-color: #fff;

    .tag {
      padding: 5px 6px;
      margin-right: 15px;
      margin-bottom: 20px;
    }
    .chart {
      transition: all 0.5s;
      overflow: hidden;
      .chartItem {
        padding-bottom: 10px;
        display: flex;
        align-items: center;
        font-size: 14px;
        .c1 {
          margin-right: 10px;
        }
        .c2 {
          flex: 1;
          text-align: right;
          background-color: #ebdfdf;
          height: 16px;
          line-height: 16px;
          border-radius: 10px;
          .num {
            background-color: #fe6d67;
            border-radius: 10px;
            color: #fff;
          }
        }
        .c3 {
          text-align: center;
          width: 30px;
          .up {
            color: #00d47a;
          }
          .down {
            color: #fe6d67;
          }
        }
        .c4 {
          width: 30px;
          text-align: right;
        }
      }
    }
    .look-more {
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: center;
      color: #545671;
      line-height: 20px;
      letter-spacing: 0px;
    }
    .deg180 {
      display: inline-block;
      transform: rotate(180deg);
    }
  }
}
</style>
